import * as React from 'react'
import { NavLink, withRouter, RouteComponentProps, Link } from 'react-router-dom'
import style from "./style.module.less"
import less from 'less';

function Nav(props: RouteComponentProps) {
  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => { // 改变主题样式
    setSelectValue(e.target.value)
    less.modifyVars({
      '@primary-color': e.target.value
    });
  }
  const [selectValue, setSelectValue] = React.useState('rgb(196, 204, 232)')
  return (
    <nav className={style.header}>
      <div className="container">
        <Link to="/" className={style.title}>
          时间胶囊
        </Link>
        <ul className={style.nav}>
          <li>
            <NavLink to="/" className={style.li}>首页</NavLink>
          </li>
          <li>
            <NavLink to="put" className={style.li} activeClassName={style.activeli}>添加</NavLink>
          </li>
          <li className="active">
            <NavLink to="open" className={style.li} activeClassName={style.activeli}>打开</NavLink>
          </li>
        </ul>
        <button className={style.theme}>主题
          <select value={selectValue}
            onChange={(e) => handleChange(e)} >
            <option value="rgb(196, 204, 232)">purple</option>
            <option value="rgb(133, 192, 136)">green</option>
            <option value="rgb(236, 227, 173)">cream</option>
          </select></button>
      </div>
    </nav>
  )
}

export default withRouter(Nav)
